<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>英雄列表</title>
        <link rel="stylesheet" href="./app.css" />
        <link
            href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.css"
            rel="stylesheet"
        />
    </head>
    <body>
        <div class="container">
            <h2>英雄列表</h2>
            <hr />
            <div class="filter">
                <button>所有</button>
                <button>射手</button>
                <button>辅助</button>
                <button>刺客</button>
                <button>战士</button>
                <button>法师</button>
            </div>
            <hr />
            <div class="hero-list"></div>
        </div>
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.24.0/axios.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.js"></script>
        <script>
            //获取 hero-list
            let heroList = document.querySelector(".hero-list");
            let btns = document.querySelectorAll(".filter button");

            //设置拦截器
            axios.interceptors.request.use((config) => {
                //启动进度条
                NProgress.start();
                return config;
            });

            axios.interceptors.response.use((res) => {
                //关闭进度条
                NProgress.done();
                return res.data;
            }, error => {
                //错误处理
                console.log('请求失败, 错误为', error);
                //中断 promise 链条
                return new Promise(() => {});
            });

            async function main() {
                //发送请求
                let data = await axios("https://api.xiaohigh.com/lo");
                updateList(data);
                
            }
            main();

            //绑定事件
            btns.forEach((btn) => {
                btn.onclick = async function () {
                    //获取标签的文本
                    let type = this.innerHTML;
                    let config = {};
                    //判断类型是否为 『所有』
                    if (type === "所有") {
                        config = {};
                    } else {
                        config = {
                            params: {
                                roles: this.innerHTML,
                            },
                        };
                    }

                    // 接口地址 https://api.xiaohigh.com/lol?roles=法师
                    let data = await axios.get(
                        "https://api.xiaohigh.com/lol",
                        config
                    );
                    //清空列表
                    heroList.innerHTML = "";
                    //更新列表
                    updateList(data);
                    
                };
            });

            //更新列表
            function updateList(data) {
                //遍历 data
                data.forEach((item) => {
                    //动态的创建 .item 元素
                    let div = document.createElement("div");
                    //设置 class 属性
                    div.className = "item";
                    //创建 img 元素
                    let img = document.createElement("img");
                    //设置 src 属性
                    img.src = item.avatar;
                    //创建 p 元素
                    let p = document.createElement("p");
                    //设置 p 元素的文本
                    p.innerHTML = item.name;
                    //拼装
                    div.appendChild(img);
                    div.appendChild(p);
                    //插入 herolist 中
                    heroList.appendChild(div);
                });
            }
        </script>
    </body>
</html>
